<template>

    <el-menu :default-active="this.$store.state.menu.editableTabsValue" class="el-menu-vertical-demo"
        background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">

        <router-link to="/index">
            <el-menu-item index="Index" @click="selectMenu({ name: 'Index', title: '首页' })">
                <template slot="title">
                    <i class="el-icon-s-home"></i>
                    <span slot="title">首页</span>
                </template>
            </el-menu-item>
        </router-link>

        <el-submenu :index="menu.name" v-for="menu in menuList" :key="menu.name">
            <template slot="title">
                <i :class="menu.icon"></i>
                <span>{{menu.title}}</span>
            </template>

            <router-link :to="item.path" v-for="item,index in menu.children" :key="index">
                <el-menu-item :index="item.name" @click="selectMenu(item)">
                    <template slot="title">
                        <i :class="item.icon"></i>
                        <span slot="title">{{item.title}}</span>
                    </template>
                </el-menu-item>
            </router-link>

        </el-submenu>

    </el-menu>

</template>

<script>
export default {
    data() { 
        return {
          
        }
    },
    methods: {
        selectMenu(item) { 
            this.$store.commit('addTab', item)
        },
        
    },
    computed: {
        menuList: {
            get() {
                return this.$store.state.menu.menuList
            }
        }
    },
    created() { 

    }
}
</script>

<style scoped>


    .el-aside {
        background-color: #D3DCE6;
        color: #333;
        line-height: 200px;
    }
    .el-menu-vertical-demo {
        border: none;
        height: 100vh;
    }
    a {
        text-decoration: none;
    }
</style>